<template>
  <crumbs></crumbs>
  <div class="wrapper">
    <div class="list">
      <h1>欢迎使用Todo List</h1>
      <TodoAdd @addTodo="onAddTodo"></TodoAdd>

      <TodoFilters @changeFilter="onChangeFilter"></TodoFilters>

      <div class="todo-list">
        <TodoItems ref="todoItems"></TodoItems>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import TodoAdd from './TodoAdd.vue'
import TodoFilters from './TodoFilters.vue'
import TodoItems from './TodoItems.vue'

import { ref } from 'vue'

const todoItems = ref()
console.log(todoItems)

const onAddTodo = (val: string) => {
  todoItems.value.addItem(val)
}

const onChangeFilter = (val: number) => {
  todoItems.value.filterType = val
}
</script>

<style lang="less" scoped>
.list {
  width: 100%;
  height: 100%;
  h1 {
    font-size: 24px;
    margin: 0 0 20px;
  }
}
</style>
